<template>
  <el-row style="height: calc(100vh - 84px); overflow: scroll">
    <el-col :span="12">
      <el-table
        style="height: 100%"
        v-loading="isloading"
        :data="jstList"
        show-overflow-tooltip
        row-key="id"
        default-expand-all
        :cell-style="jstTableCellStyle"
      >
        <el-table-column label="2C销售-聚水潭" align="center">
          <el-table-column prop="outBoundDate" label="出库日期" align="center" />
          <el-table-column prop="shopName" label="店铺名称" align="center" />
          <el-table-column prop="jstCode" label="金蝶物料编码" align="center" />
          <el-table-column prop="jstSumCount" label="求和项：数量" align="center">
            <template #default="scope">
              <div :class="{ 'green-bg': scope.row.dataReplenish }">{{ scope.row.jstSumCount }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div v-lazyLoad="handleLazyLoad" style="height: 1px"></div>
    </el-col>
    <el-col :span="12">
      <el-table
        style="height: 100%"
        v-loading="isloading"
        :data="kingDeeList"
        row-key="id"
        show-overflow-tooltip
        :cell-style="jdTableCellStyle"
        default-expand-all
      >
        <el-table-column align="center" label="2C销售-金蝶">
          <el-table-column prop="outBoundDate" label="日期" align="center" />
          <el-table-column prop="custom" label="客户" align="center" />
          <el-table-column prop="kingDeeCode" label="物料编码" align="center" />
          <el-table-column prop="kingDeeSumCount" label="求和项：调拨数量" align="center">
            <template #default="scope">
              <div :class="{ 'red-bg': scope.row.dataReplenish }">{{ scope.row.kingDeeSumCount }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="diffCount" width="80" label="总差异" align="center" />
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row style="height: calc(100vh - 84px); overflow: scroll">
    <el-col :span="12">
      <el-table style="height: 100%" v-loading="isLoading" :data="jstList" row-key="id" default-expand-all :cell-style="jstTableCellStyle">
        <el-table-column label="2C销售-聚水潭" align="center">
          <el-table-column prop="outBoundDate" label="出库日期" align="center" />
          <el-table-column prop="shopName" label="店铺名称" align="center" />
          <el-table-column prop="jstCode" label="金蝶物料编码" align="center" />
          <el-table-column prop="jstSumCount" label="求和项：数量" align="center">
            <template #default="scope">
              <div :class="{ 'green-bg': scope.row.dataReplenish }">{{ scope.row.jstSumCount }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div v-lazyLoad="handleLazyLoad" style="height: 1px"></div>
    </el-col>
    <el-col :span="12">
      <el-table style="height: 100%" v-loading="isLoading" :data="kingDeeList" row-key="id" :cell-style="jdTableCellStyle" default-expand-all>
        <el-table-column align="center" label="2C销售-金蝶">
          <el-table-column prop="outBoundDate" label="日期" align="center" />
          <el-table-column prop="custom" label="客户" width="200" align="center" />
          <el-table-column prop="kingDeeCode" label="物料编码" width="200" align="center" />
          <el-table-column prop="kingDeeSumCount" label="求和项：调拨数量" align="center">
            <template #default="scope">
              <div :class="{ 'red-bg': scope.row.dataReplenish }">{{ scope.row.kingDeeSumCount }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="diffCount" width="80" label="总差异" align="center" />
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { listDataCheck } from '@/api/data-check/codeSumCountDiff/index';
// 定义数据
const tableData = {
  jstList: [],
  kingDeeList: []
};
const isLoading = ref(true);

const jstList = ref([]);
const kingDeeList = ref([]);

const lazyLoadOptions = {
  displayLength: 1, // 每次显示的行数
  currentRowCount: 0 //当前行数
};

//判断是否滑动到最底部
let scrollToBottom = false;

// 定义表格单元格样式
const jdTableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (row.dataReplenish) {
    return {
      background: 'red',
      color: 'white'
    };
  }
  return '';
};

const jstTableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (row.dataReplenish) {
    return {
      background: 'green',
      color: 'white'
    };
  }
  return '';
};

// 请求接口
const handleData = async () => {
  isLoading.value = true;
  let res = await listDataCheck();
  tableData.jstList = res.rows[0].jstList ?? [];
  tableData.kingDeeList = res.rows[0].kingDeeList ?? [];
  handleLazyLoad();
  isLoading.value = false;
};

//处理懒加载
const handleLazyLoad = () => {
  if (scrollToBottom) return;
  const nextRowCount = lazyLoadOptions.currentRowCount + lazyLoadOptions.displayLength;
  if (nextRowCount <= tableData.jstList.length) {
    jstList.value.push(tableData.jstList.slice(lazyLoadOptions.currentRowCount, nextRowCount)[0]);
    kingDeeList.value.push(tableData.kingDeeList.slice(lazyLoadOptions.currentRowCount, nextRowCount)[0]);
    lazyLoadOptions.currentRowCount = nextRowCount;
  } else {
    // 防止超出数据总量
    jstList.value.push(tableData.jstList.slice(lazyLoadOptions.currentRowCount, tableData.jstList.length)[0]);
    kingDeeList.value.push(tableData.kingDeeList.slice(lazyLoadOptions.currentRowCount, tableData.kingDeeList.length)[0]);
    lazyLoadOptions.currentRowCount = tableData.jstList.length;
    scrollToBottom = true;
  }
};

onMounted(async () => {
  handleData();
});
</script>
<style scoped>
.text-red {
  background: red;
  color: white;
}

.red-bg {
  background-color: red;
  color: white;
}

.green-bg {
  background-color: green;
  color: white;
}
</style>
